<template>
  <div id="QuestionView">
    <a-form :model="searchParams" layout="inline">
      <a-form-item field="title" label="标题">
        <a-input v-model="searchParams.title" placeholder="请输入标题" allow-clear/>
      </a-form-item>
      <a-form-item field="tags" label="标签">
        <a-input-tag v-model="searchParams.tags" placeholder="请输入标签" allow-clear style="min-width: 280px"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="doSearch">search</a-button>
      </a-form-item>
    </a-form>
    <a-table :data="data" style="margin-top: 30px"
             :pagination="{pageSize:searchParams.pageSize,current:searchParams.current,total:total,showTotal:true}"
             @page-change="onPageChange"
    >
      <template #columns>
        <a-table-column title="id" data-index="id"></a-table-column>
        <a-table-column title="标题" data-index="title"></a-table-column>
        <a-table-column title="标签" data-index="tags">
          <template #cell="{record}">
          <span style="margin-left: 16px" v-for="(item,index) in record.tags" :key="index">
            <a-tag color="blue">{{ record.tags[index] }}</a-tag>
          </span>
          </template>
        </a-table-column>

        <a-table-column title="通过率(acceptedNum/submitNum)">
          <template #cell="{record}">
          <span v-if="record.submitNum!=0">
             {{ (((record.acceptedNum) / (record.submitNum)) * 100|0) + '%' }}
          {{ '(' + record.acceptedNum + '/ ' }}
          {{ record.submitNum + ')' }}
          </span>
            <span v-else>
             {{ '0%' }}
          {{ '(' + record.acceptedNum + '/ ' }}
          {{ record.submitNum + ')' }}
          </span>

          </template>
        </a-table-column>
        <a-table-column title="日期" data-index="createTime">

        </a-table-column>


        <a-table-column title="操作">
          <template #cell="{ record }">
            <a-button type="primary" @click="doChallenge(record)">挑战</a-button>
          </template>
        </a-table-column>
      </template>

    </a-table>


  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref, watchEffect} from 'vue';
import {QuestionControllerService} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import {useRouter} from "vue-router";

const show = ref(true)
const router = useRouter();
let data = ref([])
let total = ref();
const searchParams = ref({
  title: '',
  tags: [],
  pageSize: 2,
  current: 1
})


const listPageData = async () => {
  //listquestionVoByPageUsingPost
  const res = await QuestionControllerService.listQuestionVoByPageUsingPost(searchParams.value as any)
  if (res.code === 0) {
    data.value = res.data.records
    total.value = res.data.total
  } else {
    message.error(res.message as string)
  }

  // console.log(res)
}
const doChallenge = (data: any) => {
  router.push({
    path: '/view/question/' + data.id
  })
}
//分页方法
const onPageChange = (page: number) => {
  // searchParams.value.current =page
  searchParams.value = {
    ...searchParams.value,//把原来的值复制过来
    current: page
  }
}
/**
 * 搜索方法
 */
const doSearch = () => {
  searchParams.value = {
    ...searchParams.value,
    current: 1
  }
}
/**
 * 当方法里面的参数发生改变时 就会触发此方法
 */
watchEffect(() => {
  listPageData();
})

onMounted(() => {
  listPageData();
})

</script>

<style scoped>
#QuestionView {
  max-width: 1280px;
  margin: 0 auto;
}
</style>